<template>
    <div class="flex flex-column f14" v-if="question">
        <div>
            <span v-if="question.is_double === '0'">【单选】</span>
            <span v-else>【多选】</span>

            <span>{{question.subject_title}}</span>
        </div>

        <div class="bg-white pl5 pt6 pr5 pb6 mt10 flex row-between col-center"
             v-for="(value, key, index) in question"
             :key="index"
             v-if="$startsWithStr(key, 'answer_') && !$endsWithStr(key, '_check')"
             :class="{check: question[`${key}_check`]}" @click="check(key)">
            <div class="flex-1">{{value}}</div>

            <div class="flex-0" v-if="question[`${key}_check`]">
                <i class="fa fa-check-circle-o f25" style="color: #1aad19 !important;"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            question: {
                type: Object,
                default: null
            }
        },
        methods: {
            /**
             * 选择答案。
             *
             * @param key key 值
             */
            check(key) {
                let check_key = `${key}_check`;

                // 单选
                if (this.question.is_double === '0') {
                    for (let key2 in this.question) {
                        if ((check_key !== key2) && this.$startsWithStr(key2, 'answer_') && this.$endsWithStr(key2, '_check')) {
                            this.question[key2] = false;
                        }
                    }
                }

                // 取消选中
                if (this.question[check_key]) {
                    this.question[check_key] = false;

                    // 选中
                } else {
                    this.question[check_key] = true;
                }
            },
            /**
             * 验证是否选择答案。
             *
             * @return {boolean} 是否已选择答案：
             * <ol>
             *     <li>true-是；</li>
             *     <li>false-否。</li>
             * </ol>
             */
            validate() {
                let isOk = false;

                if (this.question) {
                    // 选择答案的个数
                    let checkCount = 0;

                    for (let key in this.question) {
                        // 已选择答案
                        if (this.$startsWithStr(key, 'answer_') && this.$endsWithStr(key, '_check') && this.question[key]) {
                            checkCount++
                        }
                    }

                    // 单选，选一个
                    if (this.question.is_double === '0') {
                        if (checkCount === 1) {
                            isOk = true;
                        } else {
                            this.$toast('请选择一个答案');
                        }

                        // 多选，至少选两个
                    } else if (this.question.is_double === '1') {
                        if (checkCount >= 2) {
                            isOk = true;
                        } else {
                            this.$toast('请选择至少两个答案');
                        }
                    }
                }

                return isOk;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .check {
        border: 2px solid #1aad19;
    }
</style>
